<!DOCTYPE html>
<html>
<head>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>兼职赚钱</title>
    <style>
        html, body {
            width: 100%;
            background: #f4f4f8;
            font-size: 14px;
            padding: 0;
            margin: 0;
        }

        .content_wrapper {
            width: 100%;
            padding-top: 10px;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;

        }

        .a_block {
            width: 95%;
            height: 100px;
            margin-bottom: 20px;
            border-radius: 5px;
            background: #fff;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding: 0 0 0 20px;
        }

        .a_left {
            height: 60px;
        }

        .a_left img {
            width: 100%;
            height: 100%;
        }

        .a_left {
            width: 60px;
        }

        .a_right {
            padding-left: 10px;
            flex: 1;
            font-size: 12px;
            color: #999;
        }

        .app_title {
            font-size: 14px;
            color: #000;
            margin-bottom: 5px;
        }

        .app_download_num {
            margin-bottom: 5px;
        }

        .b_block {
            width: 95%;
            padding: 20px;
            margin-bottom: 40px;
            border-radius: 5px;
            background: #fff;
            box-sizing: border-box;
        }

        .b_title {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 10px;
        }

        .b_title_flag {
            width: 5px;
            height: 15px;
            background: #2D91B1;
            margin-right: 5px;
        }

        .desc {
            margin-bottom: 10px;
        }

        .desc_special {
            color: #FF6600;
            margin-bottom: 10px;
            display: flex;
            flex-flow: row;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .desc_special img {
            width: 15px;
            height: 18px;
            display: inline-block;
        }

        .code_wrapper {
            width: 50%;
            background: #f4f4f8;
            height: 45px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bolder;
            margin: 0 auto;
        }

        .download_btn {
            width: 95%;
            height: 45px;
            background: #2D91B1;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }

        .download_btn a {
            text-decoration: none;
            color: #fff;
            display: block;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cj_block {
            width: 60%;
            height: 46px;
            border-radius: 23px;
            background: #FE9800;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
            font-size: 12px
        }

        .r_circle {
            position: relative;
            width: 30px;
            height: 30px;
            margin: 0 10px 0 10px;
        }

        .r_circle img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .r_rotated {
            color: #fff;
        }

        .ro_rotated {
            -webkit-animation: gif 2s infinite linear;
            animation: gif 2s infinite linear;
        }

        @keyframes gif {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>

<div id="app">
    <input type="text"  v-model="title">
    <table>
        <template>
            <div v-for="(item,index) in daan">
                <div>
                    <tr>
                        <td>{{item.sdkKey}}</td>
                    </tr>
                </div>

            </div>
        </template>


    </table>
</div>
</body>

</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title:'',
            daan:[{"sdkKey":"123"},{"sdkKey":"1234"}]
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            title: function (newQuestion, oldQuestion) {
                this.comeback(newQuestion)
            }
        },
        mounted: function () {

        },
        methods: {
            // 返回上一页
            comeback: function (newQuestion) {
                var that = this;
                $.ajax({
                    url: '/daan/daan',    //请求的url地址
                    dataType: "json",   //返回格式为json
                    async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                    data: {title:newQuestion},
                    type: "post",   //请求方式

                    success: function (req) {
                        //请求成功时处理
                        that.daan=[];
                        if(req.success){
                            that.daan=req.data;
                            console.log( that.daan)
                        }

                    },
                    error: function () {
                        //请求出错处理
                        layer.msg("请重试！若在失败请联系管理员")
                    }
                });
            },
        }
    });

</script>